<template>
  <!--  配置版本管理-->
  <div class="page">
    <!-- 条件筛选 -->
    <div class="page_filter">
      <el-input v-model="form.name" clearable placeholder="请输入公司名称">
        <template slot="prepend">公司名称</template>
      </el-input>

      <el-button class="common_btn-defalut" icon="el-icon-search" @click="form.page=1;queryList()">搜索</el-button>
    </div>
    <div class="page_main">
      <el-button icon="el-icon-plus" slot="reference" class="common_btn-small" @click="addSupplier">新增工序</el-button>
      <!-- table -->
      <div class="common_btnBox">
        <i class="iconfont iconzongshu icon-size"></i>
        总数：{{form.total}}
      </div>
      <el-table :data="tableList" border>
        <el-table-column label="序号" fixed width="80">
          <template slot-scope="scope">
            {{getIndex(scope.$index)}}
          </template>
        </el-table-column>
        <el-table-column prop="name" label="公司名称" min-width="120"></el-table-column>
        <el-table-column prop="area" show-overflow-tooltip label="公司地址" min-width="120">
          <template slot-scope="scope">
            {{scope.row.area}}-{{scope.row.address}}
          </template>
        </el-table-column>
        <el-table-column prop="concatUserName" label="法人" min-width="100"></el-table-column>
        <el-table-column prop="concatPhone" label="联系电话" min-width="80"></el-table-column>
        <el-table-column prop="bankName" label="开户行" min-width="100"></el-table-column>
        <el-table-column prop="bankUserName" label="开户名" min-width="120"></el-table-column>
        <el-table-column prop="bankNo" label="银行账号" min-width="120"></el-table-column>
        <el-table-column prop="uniqueId" label="纳税人识别号" min-width="120"></el-table-column>
        <el-table-column label="操作" fixed="right" width="180">
          <template slot-scope="scope">
            <button class="btn_edit" @click="handleEdit(scope.row)">编辑</button>
            <button class="btn_add" @click="handleEdit(scope.row)">相关合同</button>
          </template>
        </el-table-column>
      </el-table>
      <!-- 分页器 -->
      <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="form.page"
                     :page-size="form.pageSize"    :page-sizes="[10, 20, 30, 40,50,60,70,80,90,100]"
                     layout="sizes, prev, pager, next" :total="form.total">
      </el-pagination>
      <!--   工序新增-->
      <el-drawer
        title="工序"
        :visible.sync="isShowComposeDialog"
        direction="rtl"
        custom-class="demo-drawer"
        ref="drawer"
        size="60%">
        <div class="demo-drawer__content">
          <div class="goods_compose_class">
            <el-select v-model="goodsCompose.formation" filterable placeholder="请选择组成货品" clearable>
              <el-option
                v-for="item in goodsSelectList"
                :key="item.id"
                :label="item.name"
                :value="item.id">
                <span style="float: left">{{ item.name }}</span>
                <span style="float: right; color: #8492a6; font-size: 13px">{{ item.specifications }}</span>
              </el-option>
            </el-select>
            <el-button icon="el-icon-plus" type="primary" @click="addGoodsCompose">添加货品</el-button>
            <el-table height="70vh" border :data="goodsCompose.formationListTemp" class="m-t-24">
              <el-table-column label="序号" fixed width="80">
                <template slot-scope="scope">
                  工序{{scope.row.processNo}}
                </template>
              </el-table-column>
              <el-table-column label="照片" fixed width="160">
                <template slot-scope="scope">
                  <upload-img v-model="scope.row.pic" :limit="1" :size-limit="1" ref="uploadPic"></upload-img>
                </template>
              </el-table-column>
              <el-table-column label="工序描述" min-width="100px">
                <template slot-scope="scope">
                  <el-input
                    type="textarea"
                    :rows="3"
                    placeholder="请输入内容"
                    v-model="scope.row.explanation">
                  </el-input>
                </template>
              </el-table-column>
              <el-table-column label="执行人员" min-width="100px">

              </el-table-column>
              <el-table-column label="数量" width="175px">
                <template slot-scope="scope">
                  <el-input-number size="mini" v-model="scope.row.formationNumber" :min="1"></el-input-number>
                </template>
              </el-table-column>
              <el-table-column label="操作" width="90">
                <template slot-scope="scope">
                  <el-button
                    type="text"
                    class="btn_delete"
                    @click="handleDeleteImg(scope.$index)">删除
                  </el-button>
                </template>
              </el-table-column>
            </el-table>
          </div>
        </div>
        <div class="demo-drawer__footer">
          <el-button @click="isShowComposeDialog=false" type="info">取 消</el-button>
          <el-button type="primary" class="common_btn-defalut" @click="submitComposeForm">确 定</el-button>
        </div>
      </el-drawer>
    </div>
    <x-loading v-show="isLoading"></x-loading>
  </div>
</template>
<script>
import {
  getCompanyList,
  addOrUpdateCompany
} from '@/services/ERP/goods'
import UploadImg from '@/components/upload-img'
import ItemMixins from "../item.mixins";
import XLoading from '@/components/animation/x-loading.vue'
// form表单校验规则
export default {
  components: {XLoading, UploadImg},
  mixins: [ItemMixins],
  data() {
    return {
      form: {
        page: 1,
        pageSize: 10,
        companyType: 1,
        total: 0,
      },
      rule: {
        name: {required: true, message: '请输入公司名称'},
      },
      goodsCompose: {
        formationListTemp: []
      },
      tableList: [],
      isShowAddDialog: false,
      isShowComposeDialog: false,
      isLoading: false,
    }
  },
  computed: {
    //货品选择过滤掉自己
    goodsSelectList() {
      let list = this.allGoodsSelectList.filter(x => x.id !== this.goodsCompose.goodsId)
      list = list.filter(x => x.goodsEnum !== 1)
      return JSON.parse(JSON.stringify(list))
    },
    // 弹窗的title
    dialogTitle() {
      return this.supplier.id ? '编辑工序' : '新增工序'
    },
  },
  methods: {
    //提交工序组成
    async submitComposeForm() {
      let formationList = []
      //处理货品组成数据
      this.goodsCompose.formationListTemp.map(x => {
        formationList.push({
          formationId: x.formation.id,
          formationNumber: x.formation.formationNumber,
        })
      })
      this.goodsCompose.formationList = formationList
      // let res = await addOrUpdateGoodsCompose(this.goodsCompose)
      if (res.code === 200) {
        this.$notify({
          type: 'success',
          title: '提示',
          message: '更新成功！'
        })
        this.isShowComposeDialog = false
        this.queryList()
      }
    },

    //删除一个货品组成
    handleDeleteImg(index) {
      this.goodsCompose.formationListTemp.splice(index, 1);
    },
    //添加一个货品组成
    addGoodsCompose() {
      this.goodsCompose.formationListTemp.push({
        processNo: this.goodsCompose.formationListTemp.length + 1
      })
    },
    // 查看大图
    previewImg(url) {
      let list = [url]
      this.$refs.imageViewer.showViewer(list, 0)
    },
    // 获取当前的序号
    getIndex(index) {
      let param = (this.form.page - 1) * this.form.pageSize + index + 1
      return param
    },
    // 分页大小改变
    handleSizeChange(val) {
      this.form.pageSize = val
      this.queryList()
    },
    // 当前页码改变
    handleCurrentChange(val) {
      this.form.page = val
      this.queryList()
    },
    async queryList() {
      this.isLoading = true
      let res = await getCompanyList(this.form)
      this.tableList = res.data?.records || []
      this.form.page = Number(res.data?.current)
      this.form.total = Number(res.data?.total)
      this.isLoading = false
    },
    addSupplier() {
      this.isShowComposeDialog = true
      this.goodsCompose = {
        formationListTemp: []
      }
      this.$nextTick(() => {
        // this.$refs.goodsCompose.clearValidate()
      })
    },
    handleEdit(row) {
      this.isShowComposeDialog = true
      this.goodsCompose = JSON.parse(JSON.stringify(row))
      this.$nextTick(() => {
        this.$refs.goodsCompose.clearValidate()
      })
    },
  },
  mounted() {
    this.getAllGoodsSelectList()
    this.queryList()
  },

}
</script>

<style lang="less" scoped>
  .el-divider__text {
    font-size: 20px;
  }

  /deep/ .el-divider--horizontal {
    display: block;
    height: 1px;
    width: 100%;
    margin: 30px 0;
  }

  /deep/ .el-input-group__prepend {
    border-right: 0;
    background: #2196f3;
    color: white;
  }
</style>
